<template>
	<!-- 首页公告组件 -->
	<view class="indexNotice">
		<view class="left">
			<uni-icons type="sound-filled" size="20"></uni-icons>
			<text class="text">公告</text>
		</view>
		<view class="center">
			<swiper vertical autoplay interval=2000 circular>
				<swiper-item v-for="item in 5">
					kjc公告内容公告内容~
				</swiper-item>
			</swiper>
		</view>
		<view class="right">
			<uni-icons type="right" size="20" color="#333"></uni-icons>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
	.indexNotice {
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #f9f9f9;
		margin: 0 auto;
		border-radius: 80rpx;
		display: flex;

		.left {
			width: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			// 穿透到组件内改变样式
			:deep() {
				.uni-icons {
					color: $brand-theme-color !important;
				}
			}
			.text {
				color: $brand-theme-color;
				font-weight: 600;
				font-size: 28rpx;
			}
		}

		.center {
			flex: 1;

			swiper {
				height: 100%;

				swiper-item {
					height: 100%;
					font-size: 30rpx;
					color: $text-font-color-1;
					// 文本超出部分，用省略号...表示
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

		.right {
			width: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>